<template>
	<view class="sigin-page-bg" :key="refreshKey">
		<view class="signn-one">
			<!-- <view class="one-title">
				我的积分
			</view>
			<view class="one-point">
				{{point}}
			</view> -->
			<view class="one-number">
				本月已累计签到 <view class="one-length">
					{{calenDate.length || 0}}
				</view> 天
			</view>
		</view>
		<view class="signn-two">
			<image src="/static/img/jifen.png" mode="widthFix" class="animate__fadeInDown"  style="animation-duration: 2s;" />
			<view class="two-ym">
				{{ym}}
			</view>
			<view class="two-title">
				坚持连续签到有机会获得高额积分暴击哦~
			</view>
			<view class="three-content animate__fadeInLeft" style="animation-duration: 2s;">
				<view class="list-item list-item-d"
					:class="{'list-item-n': item == nowDay, 'list-item-c': calenDate.includes(String(item))}"
					v-for="(item,idx) in daytota" :key="idx">
					{{item}}
				</view>
			</view>
		</view>
		<view class="fixed-bottomx">
			<view class="fixed-bottom-innerx">
				<view type="primary" size="large" @click="signIn">立即签到</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/common/common'
	import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
	export default {
		data() {
			return {
				qrcodeOptions: {
					margin: 6,
				},
				inviteCode: '',
				realName: '',
				point: '',
				appDownloadUrl: '',
				nowDate: new Date((new Date).getTime() + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19),
				calenDate: [],
				daytota: 0,
				nowDay: dayjs(new Date()).format('DD'),
				ym: '',
				refreshKey:0,
				dayjs
			}
		},
		onLoad() {
			this.getMemberInfo();
			this.findMyCurrentMonthSignedInDate();
			this.getAppDownloadUrl();
			this.getDaysInCurrentMonth();
			this.ym = dayjs(new Date()).format('YYYY年MM月')
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			getDaysInCurrentMonth() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1;
				const lastDayOfMonth = new Date(currentYear, currentMonth, 0).getDate();
				this.daytota = lastDayOfMonth;
			},
			signIn() {
				var that = this;
				uni.$uv.http.post('/member/signIn', {}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '签到成功',
						duration: 2000,
						complete: function() {
							that.getMemberInfo();
							that.findMyCurrentMonthSignedInDate();
						}
					});
				});
			},
			saveImg() {
				this.$refs.qrcode.save({
					success: (res) => {
						console.log(res);
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			getAppDownloadUrl() {
				var that = this;
				uni.$uv.http.get('/setting/getAppDownloadUrl').then(res => {
					that.appDownloadUrl = res.data;
				});
			},

			copyData(data) {
				common.copyData(data);
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.inviteCode = res.data.inviteCode;
					that.realName = res.data.realName;
					that.point = res.data.point;
				});
			},
			findMyCurrentMonthSignedInDate() {
				var that = this;
				uni.$uv.http.get('/member/findMyCurrentMonthSignedInDate').then(res => {
					this.calenDate = res.data.map(item => {
						return dayjs(item).format('D')
					})
				});
			},
		}
	}
</script>

<style lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.signn-one {
		display: flex;
		flex-direction: column;

		.one-title {
			font-weight: 400;
			font-size: 24rpx;
			color: #000;
			line-height: 24rpx;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 24rpx;
		}

		.one-point {
			font-weight: bold;
			font-size: 52rpx;
			color: #000;
			line-height: 52rpx;
			letter-spacing: 1px;
			text-shadow: 4px 4px 16px rgba(11, 19, 39, 0.4);
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 60rpx;
		}

		.one-number {
			display: flex;
			font-weight: 400;
			font-size: 30rpx;
			color: #000;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 32rpx;
		}

		.one-length {
			color: #000;
		    font-weight: 550;
		}
	}

	.signn-two {
		background: #FFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 4rpx solid #FFFFFF;
		padding: 52rpx 32rpx 18rpx;
		box-sizing: border-box;
        image{
			width: 200rpx;
			position: absolute;
			right:40rpx;
			top:180rpx;
		}
		.two-ym {
			font-size: 48rpx;
			color: #000;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.two-title {
			font-weight: 400;
			font-size: 24rpx;
			color: #C5C3BA;
			line-height: 24rpx;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 20rpx;
			margin-bottom: 38rpx;
		}

		.three-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-content: space-between;

			.list-item {
				width: 76rpx;
				height: 76rpx;
				margin: 14rpx 14rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #0B1327;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				text-transform: none;
				align-items: center;
				justify-content: center;
				border: 2rpx solid transparent;

				border-radius: 50%;

				&:nth-child(6n) {
					margin-right: 0;
				}

				&:nth-child(6n + 1) {
					margin-left: 0;
				}
			}

			.list-item-d {
				background: #F5F7FB;
			}

			.list-item-c {
				background: #FFF6EB;
				border: 4rpx solid #EDD4B6;
				color: #F9C25F;
			}

			.list-item-n {
				background: #FDC357;
			}
		}

		.uv-calendar__weeks {
			>.uv-calendar__weeks-item {
				&:nth-child(1) {
					margin-left: 0;
				}

				&:nth-last-child(1) {
					margin-right: 0;
				}
			}
		}

		.uv-calendar__weeks-item {
			margin: 0 14rpx;
		}

		.uv-calendar__header,
		.uv-calendar__weeks-week{
		display: none;
		}
	}

	.uv-calendar-item--multiple {
		background: rgba(228, 212, 148, 0.1) !important;
		border-radius: 50%;
		border: 2rpx solid #E4D494;

		.uv-calendar-item__weeks-box-item {
			.uv-calendar-item--multiple {
				border: 0;
			}
		}

		>span {
			font-weight: bold;
			font-size: 28rpx;
			color: #E4D494;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.fixed-bottomx {
		display: flex;
		justify-content: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top: 132rpx;
	}

	.fixed-bottom-innerx {
		// .uv-button--primary{
		background:#FEE19E;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		width: calc(100% - 80rpx);
		height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #0B1327;
		letter-spacing: 1px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		line-height: 100rpx;
		// }
	}

	.sigin-page-bg {
		// height: calc(100% + 44px + env(safe-area-inset-top)) !important;
		padding: 60rpx 24rpx 130rpx;
		padding-top: calc(44px + env(safe-area-inset-top) + 60rpx);
		box-sizing: border-box;
		margin-top: calc(-44px - env(safe-area-inset-top));
	}
</style>